<div class="layui-btn-container" style="display: flex;">
    <!-- 只能在一行 -->
    {% include '页面/首页/创建任务.html' %}
    {% include '页面/首页/批量创建任务.html' %}
</div>
{% include '页面/首页/表格-操作栏.html' %}



{% include '页面/首页/搜索任务.html' %}

<table class="layui-hide" id="Index-ID-table-demo-page"></table>

<script>
    layui.use(function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var $ = layui.$;

        // 渲染状态选择框
        form.render('select');

        // 创建渲染实例
        var taskTable = table.render({
            elem: '#Index-ID-table-demo-page',
            url: '/api/task/get_task_list/', // 此处为静态模拟数据，实际使用时需换成真实接口
            page: true,
            where: {
                "uid": userInfo.uid,
                "keyword": "",
                "status": ""
            },
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'tid', width: 80, title: 'ID' },
                { field: 'name', width: 200, title: '任务名' },
                { field: 'description', width: 300, title: '任务描述', minWidth: 300 },
                { field: 'points', width: 90, title: '积分', sort: true, align: 'center' },
                {
                    field: 'status', width: 100, title: '状态', templet: (d) => {
                        switch (d.status) {
                            case 1:
                                return '<span class="layui-badge layui-bg-green">未开始</span>';
                            case 2:
                                return '<span class="layui-badge layui-bg-orange">进行中</span>';
                            case 3:
                                return '<span class="layui-badge layui-bg-blue">已完成</span>';
                            case 4:
                                return '<span class="layui-badge layui-bg-red">已结束</span>';
                            default:
                                return '未知';
                        }
                    }
                },
                { field: 'start_time', title: '开始时间', width: 100 },
                { field: 'end_time', title: '结束时间', width: 100 },
                {
                    title: '是否已结束', width: 100, templet: (d) => {
                        return isInProgress(d.start_time, d.end_time) ? '<span class="layui-badge layui-bg-green">未结束</span>' : '<span class="layui-badge layui-bg-red">已结束</span>';
                    }
                },
                { fixed: 'right', minWidth: 200, title: '操作', toolbar: '#taskBar', align: 'center', }
            ]],
            parseData: (res) => {
                console.log(res);

                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.message, // 解析提示文本
                    "count": res.data.page.count, // 解析数据长度
                    "data": res.data.list // 解析数据列表
                };
            }
        });


        // 初始化任务操作栏
        taskBarInit(table, form, layer, laydate, $);
        // 初始化搜索任务
        SearchTaskInit($, taskTable, form);
        // 监听创建任务按钮点击事件
        createTaskFunc(table, form, layer, laydate, $);

        // 监听批量创建任务按钮点击事件
        batchCreateTaskFunc($, table, layer, form, laydate);

    });


</script>